<template>
  <div class="singleProject">
    <div class="gp-top">
      <div class="top-title">
        <div class="t-flag"></div>
        <div class="t-text">查询</div>
      </div>
      <div class="top-search">
        <div class="s-box">
          <div class="b-account">
            <span class="a-title">项目:</span>
            <el-select v-model="selectProject" placeholder="请选择" @change="handleChange">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.project_name"
                :value="item.id">
              </el-option>
            </el-select>
            <el-button class="a-search" @click="handleSearch()">搜索</el-button>
            <el-button class="a-export" @click="handleExport()">导出</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="gp-bottom">
      <div class="show-box">
        <div class="bottom-title">
          <div class="t-flag"></div>
          <div class="t-text">实时业绩</div>
          <div class="t-state">
            <div class="t-s-title">当前状态:</div>
            <div class="t-s-btn" v-if="isCut===2" @click="handleIsCut(1)">拦截</div>
            <div class="t-s-btn" v-if="isCut===1" @click="handleIsCut(2)">不拦截</div>
          </div>
        </div>
        <div class="current-title">当前选择的项目:<span style="color: #2A4BF0;">{{currentSelectPro}}</span></div>
        <div class="bottom-content-real">
          <div  v-if="yejiList.length!==0" v-for="(item,index) in yejiList" :key="index" >
            <div class="content-box" @click="handleSelectPerson(item.mobile)">
              <div class="item-name">{{item.name}}</div>
              <div class="item-money">￥{{item.total_money}}</div>
            </div>
            <el-button class="group-btn btn" @click="handleExportGroup(item.user_id)">团队业绩导出</el-button>
          </div>
          <div class="no-data" v-if="yejiList.length===0">
            暂无数据
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "SingleProject",
    data(){
      return{
        account:'13653866679',
        isCut:1,
        yejiList:[],
        options:[
          {
            id:'',
            project_name:''
          }
        ],
        selectProject:'',
        currentSelectPro:"尚未选择"
      }
    },
    mounted() {
      //获取所有项目下的任务列表
      this.handleGetSingleList()
      //获取项目列表
      this.hanldeGetProList()
    },
    methods:{
      handleChange(item){
        console.log(item)
        this.options.forEach((pro)=>{
          if(item===pro.id){
            this.currentSelectPro=pro.project_name
          }
        })
      },
      //按项目筛选
      handleSearch(){
         let data={
           type:this.isCut,
           project_id: this.selectProject
         }
        const loading =this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.$api.SingleYejiList(data).then((res)=>{
          if(res.data && res.data.list.length!==0){
            this.yejiList=res.data.list
          }
          loading.close()
        },(res)=>{
          this.$message.error(res.msg)
        })
        setTimeout(()=>{
          loading.close()
        },10000)
      },
      //获取单业绩列表
      handleGetSingleList(){
        const loading =this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        let data={
          type:this.isCut,
          project_id:this.selectProject+''
        }
        this.$api.SingleYejiList(data).then((res)=>{
          if(res.data && res.data.list.length!==0){
            this.yejiList=res.data.list
          }
          loading.close()
        },(res)=>{
          this.$message.error(res.msg)
        })
        setTimeout(()=>{
          loading.close()
        },10000)
      },
      //获取项目列表
      hanldeGetProList(){
        this.$api.ProjectList().then((res)=>{
          if(res.data.length!==0){
            this.options=res.data
          }
        },(err)=>{
          this.$message.error(err.msg)
        })
      },
      //获取拦截与否的列表
      handleIsCut(cutType){
        this.isCut=cutType
        const loading =this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        let data={
          type:this.isCut,
          project_id: this.selectProject+''
        }
        this.$api.SingleYejiList(data).then((res)=>{
          if(res.data && res.data.list.length!==0){
            this.yejiList=res.data.list
          }
          loading.close()
        },(res)=>{
          this.$message.error(res.msg)
        })
        setTimeout(()=>{
          loading.close()
        },10000)
      },
      //查询人物
      handleSelectPerson(mobile){
        let account=''
        if(mobile){
          account=mobile
        }else{
          if(this.account && this.account.length==11){
            account=this.account
          }else{
            this.$message.error("请输入正确的账号")
            return
          }
        }
        if(account){
          this.$router.push({path:'/menus/single-queryPerson',query:{account:account}})
        }
      },
      //团队业绩导出
      handleExportGroup(userId){
       let url=process.env.API_HOST+"/index.php/dataofuser/excelTeamData?user_id="+userId
       const a=document.createElement("a")
        a.setAttribute("download","");
        a.setAttribute("href",url)
        a.click()
      },
      //导出业绩
      handleExport(){
        let url=process.env.API_HOST+"/index.php/dataofuser/getSingleTotalList?type="+this.isCut+"&to_excel=1"+"&project_id="+this.selectProject
        const a=document.createElement("a")
        a.setAttribute("download","");
        a.setAttribute("href",url)
        a.click()
      }
    }
  }
</script>

<style scoped lang="less">
  .singleProject{
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    overflow: auto;
    .gp-top{
      width: 100%;
      background-color: #ffffff;
      .top-title{
        height: 50px;
        display: flex;
        align-items: center;
        padding-left: 30px;
        box-sizing: border-box;
        border-bottom: solid 1px #EEEEEE;
        .t-flag{
          width: 3px;
          height: 15px;
          background-color: #2A4BF0;
        }
        .t-text{
          padding-left: 10px;
          font-size: 16px;
          color: #323232;
        }
      }
      .top-search{
        box-sizing: border-box;
        padding: 20px 40px 20px 40px;
        .s-box{
          width: 100%;
          background-color: #F8F8F8;
          .b-account{
            text-align: left;
            position: relative;
            padding: 7px 10px;
            border-radius: 5px;
            box-sizing: border-box;
            .a-title{
              font-size: 14px;
              color: #323232;
            }
            input{
              width: 200px;
              height: 30px;
              font-size: 14px;
              padding: 5px 10px;
              box-sizing: border-box;
              border: solid 1px #DFE2E7;
              border-radius: 3px;
            }
            .a-search{
              margin-left: 20px;
              width: 80px;
              height: 30px;
              padding: 0;
              line-height: 30px;
            }
            .a-export{
              position: absolute;
              right: 20px;
              width: 80px;
              height: 30px;
              padding: 0;
              line-height: 30px;
            }
          }
        }
      }
    }
    .gp-bottom{
      /*height: 100%;*/
      margin-top: 10px;
      background-color: #ffffff;
      .show-box{
        .bottom-title{
          height: 50px;
          display: flex;
          align-items: center;
          padding-left: 30px;
          box-sizing: border-box;
          position: relative;
          .t-flag{
            width: 3px;
            height: 15px;
            background-color: #2A4BF0;
          }
          .t-text{
            padding-left: 10px;
            font-size: 16px;
            color: #323232;
          }
          .t-state{
            position: absolute;
            right: 80px;
            top: 50%;
            transform: translate(0,-50%);
            .t-s-title{
              display: inline-block;
            }
            .t-s-btn{
              display: inline-block;
              border: solid 1px red;
              padding: 2px 10px;
              color: red;
              cursor: pointer;
            }
          }
        }
        .current-title{
          text-align: left;
          padding-left: 43px;
        }
        .title{
          text-align: left;
          padding-left: 43px;
        }
        .money{
          text-align: right;
          font-weight: bold;
          font-size: 15px;
          color: #EA2910;
          padding-right: 50px;
        }
        .bottom-content-real{
          padding: 20px 40px 40px 30px;
          display: flex;
          flex-wrap: wrap;
          .content-box{
            cursor: pointer;
            width: 120px;
            height: 160px;
            position: relative;
            background-color: #95A1FD;
            border-radius: 5px;
            margin: 10px 20px;
            color:#ffffff;
            .item-name{
              position: absolute;
              left: 50%;
              font-size: 15px;
              top:10px;
              transform: translate(-50%,0);
            }
            .item-money{
              position: absolute;
              left: 50%;
              font-size: 15px;
              top:88px;
              z-index: 10;
              transform: translate(-50%,0);
            }
          }
          .btn{
            width: 120px;
            height: 30px;
            background-color:#F9B420;
            color: #ffffff;
            padding: 0;
            line-height: 22px;
          }
          .no-data{
            width: 100%;
            text-align: center;
          }
          .content-box::after{
            content: '';
            width: 100px;
            height: 100px;
            position: absolute;
            left: 50%;
            transform: translate(-50%,50px);
            border-radius: 50px;
            background-color: #8F9CFF;
          }
        }
      }

    }
  }
</style>

